<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <style>
        /* 设置页面全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh; /* 页面高度为视口高度 */
        }

        /* 标题栏样式 */
        #header {
            background-color: #007bff; /* 蓝色背景 */
            color: white; /* 白色文字 */
            padding: 10px;
            text-align: center; /* 居中显示文字 */
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 粗体 */
        }

        /* 聊天内容容器样式 */
        #chat-container {
            flex: 1; /* 占满剩余高度 */
            display: flex;
            flex-direction: column;
            border: 1px solid #ddd; /* 灰色边框 */
            margin: 20px;
            padding: 10px;
            overflow-y: auto; /* 如果内容溢出，添加滚动条 */
            background-color: #f9f9f9; /* 背景色 */
        }

        /* 聊天消息通用样式 */
        .message {
            margin: 10px 0;
        }

        /* 用户消息样式（右对齐） */
        .message.user {
            text-align: right;
        }

        /* 用户消息内容样式 */
        .message.user .message-content {
            background-color: #d1e7dd; /* 绿色背景 */
            padding: 10px;
            border-radius: 5px; /* 圆角边框 */
            display: inline-block;
        }

        /* 机器人消息内容样式 */
        .message.bot .message-content {
            background-color: #e2e3e5; /* 灰色背景 */
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
        }

        /* 输入框和按钮容器样式 */
        #input-container {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ddd; /* 灰色上边框 */
            background-color: #fff; /* 白色背景 */
        }

        /* 输入框样式 */
        #prompt {
            flex: 1; /* 占满容器宽度 */
            padding: 10px;
            border: 1px solid #ddd; /* 灰色边框 */
            border-radius: 5px; /* 圆角边框 */
            margin-right: 10px; /* 右边距 */
        }

        /* 发送按钮样式 */
        #send {
            padding: 10px;
            border: none; /* 去除默认边框 */
            border-radius: 5px; /* 圆角边框 */
            background-color: #007bff; /* 蓝色背景 */
            color: white; /* 白色文字 */
            cursor: pointer; /* 鼠标悬停时显示手型指针 */
        }

        /* 动态加载文本样式 */
        .loading {
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <div id="header">AI禅师</div>

    <!-- 聊天内容容器 -->
    <div id="chat-container"></div>

    <!-- 输入框和按钮容器 -->
    <div id="input-container">
        <!-- 用户输入问题的文本框 -->
        <input type="text" id="prompt" placeholder="在这里输入问题">
        <!-- 发送按钮 -->
        <button id="send">发送</button>
    </div>

    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var loadingInterval;

            // 发送按钮点击事件处理
            $('#send').click(function() {
                var prompt = $('#prompt').val(); // 获取用户输入内容
                if (prompt.trim() === '') { // 检查输入是否为空
                    return; // 如果为空，不发送请求
                }

                // 将用户消息添加到聊天窗口中
                $('#chat-container').append(
                    '<div class="message user"><div class="message-content">' + prompt + '</div></div>'
                );

                // 添加一个“正在回答中...”的占位符消息
                var loadingMessage = $('<div class="message bot"><div class="message-content loading">正在回答中</div></div>');
                $('#chat-container').append(loadingMessage);
                $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight); // 滚动到聊天窗口底部

                // 动态更新“正在回答中...”的文本
                var dots = 0;
                loadingInterval = setInterval(function() {
                    dots = (dots + 1) % 4; // 0, 1, 2, 3 循环
                    var text = '正在回答中' + '.'.repeat(dots); // 动态添加点
                    loadingMessage.find('.loading').text(text);
                }, 500);

                // 发送 AJAX 请求到后端
                $.ajax({
                    url: '/chat', // 请求的后端 URL
                    type: 'POST', // 请求方法
                    contentType: 'application/json', // 请求内容类型
                    data: JSON.stringify({ prompt: prompt }), // 将用户输入的内容作为JSON数据发送
                    success: function(data) {
                        clearInterval(loadingInterval); // 停止动态文本更新
                        loadingMessage.remove(); // 移除“正在回答中...”的占位符

                        // 将机器人回复添加到聊天窗口中
                        $('#chat-container').append(
                            '<div class="message bot"><div class="message-content">' + data.reply + '</div></div>'
                        );
                        $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight); // 滚动到聊天窗口底部
                    },
                    error: function(err) {
                        clearInterval(loadingInterval); // 停止动态文本更新
                        loadingMessage.remove(); // 移除“正在回答中...”的占位符

                        // 显示错误信息
                        $('#chat-container').append(
                            '<div class="message bot"><div class="message-content">Error: ' + err.responseText + '</div></div>'
                        );
                        $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight); // 滚动到聊天窗口底部
                    }
                });

                // 清空输入框内容
                $('#prompt').val('');
            });
        });
    </script>
</body>
</html>
